let canvasCtx = null;
let plot = document.getElementById('plot');
let plotCtx= plot.getContext('2d');

function initDrawContext(canvasEle){
	canvasCtx = canvasEle.getContext('2d');
}

function draw(list, width, height){
	canvasCtx.fillStyle = 'rgb(0, 0, 0)';

	plotCtx.fillStyle = 'rgb(0, 0, 0)';
	plotCtx.clearRect(0, 0, width, height);
	let dx = width / list.length;
	let x = 0;
	plotCtx.beginPath();
	plotCtx.moveTo(x, list[0] / 10);

	for(let i = 0; i < list.length; i++){
		// let w = 200 + 50 * (list[i] - 128) / 128;
		// let h = w;
		// canvasCtx.clearRect(0, 0, width, height);
		// canvasCtx.fillRect(width / 2 - w / 2, height / 2 - h / 2, w, h);

		plotCtx.lineTo(x, list[i] / 10);
		x += dx;

		canvasCtx.clearRect(0, 0, width, height);
		drawRectList(canvasCtx, 50 * (list[i] - 128) / 128);
	}

	plotCtx.stroke();
	plotCtx.closePath();
}